<template>
	<view>
		<!-- 导航 -->
		<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @clickRight="openAddInput">
			<view class="flex align-center justify-center font-weight-bold w-100">
				<view 
				class="mx-1" 
				v-for="(item, index) in tabBars"
				:key="index"
				:class="tabIndex === index ? 'font-lg text-main' : 'font-md text-light-muted'"
				@click="changeTab(index)">
					{{ item.name }}
				</view>
			</view>
			<text slot="right" class="iconfont icon-fatie_icon"></text>
		</uni-nav-bar>
		<!-- 滑动区域 -->
		<swiper
		:duration="150"
		:current="tabIndex"
		:style="{ height: scrollH+'px'}"
		@change="onchangeTab">
			<!-- 关注 -->
			<swiper-item>
				<scroll-view 
				scroll-y="true"
				:style="{ height: scrollH+'px'}"
				@scrolltolower="loadmoreEvent()">
					<block v-for="(item,index) in list" :key="index">
						<!-- 列表组件 -->
						<common-list 
						:item="item" 
						:index="index"
						@doSupport="doSupport"></common-list>
						<!-- 全局分割线 -->
						<divider></divider>
					</block>
					<!-- 上拉加载 -->
					<load-more :loadmore="loadmore"></load-more>
				</scroll-view>
			</swiper-item>
			<!-- 话题 -->
			<swiper-item>
				<scroll-view 
				scroll-y="true"
				:style="{ height: scrollH+'px'}">
					<!-- 热门分类 -->
					<hot-cate :hotCate="hotCate"></hot-cate>
					<!-- 搜索框 -->
					<view class="p-2">
						<view class="flex align-center justify-center bg-light rounded py-2 text-secondary">
							<text class="iconfont icon-sousuo mr-2"></text>
							搜索话题
						</view>
					</view>
					<!-- 轮播图 -->
					<swiper 
					class="px-2 pb-2"
					:indicator-dots="true" 
					:autoplay="true" 
					:interval="3000" 
					:duration="1000">
						<swiper-item>
							<image 
							src="/static/demo/banner1.jpg"
							class="w-100 rounded"
							style="height: 300rpx">
							</image>
						</swiper-item>
						<swiper-item>
							<image
							src="/static/demo/banner1.jpg"
							class="w-100 rounded"
							style="height: 300rpx">
							</image>
						</swiper-item>
						<swiper-item>
							<image
							src="/static/demo/banner1.jpg"
							class="w-100 rounded"
							style="height: 300rpx">
							</image>
						</swiper-item>
					</swiper>
					<!-- 最近更新 -->
					<view class="p-2 font-md">最近更新</view>
					<block v-for="(item,index) in topicList" :key="index">
						<topic-list :item="item" :index="index"></topic-list>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo = [
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: true,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "/static/demo/datapic/11.jpg",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "support",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		},
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: true,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "unsupport",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		},
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: true,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "unsupport",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		},
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: true,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "unsupport",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		}
	]
	// 引入列表组件
	import commonList from '@/components/common/common-list.vue';
	//引入上拉加载组件
	import loadMore from '@/components/common/load-more.vue';
	//引入热门分类组件
	import hotCate from '@/components/news/hot-case.vue';
	//引入话题列表组件
	import topicList from '@/components/news/topic-list.vue'
	export default {
		components: {
			commonList,
			loadMore,
			hotCate,
			topicList
		},
		data() {
			return {
				//滑动区域
				scrollH: 500,
				//选中值
				tabIndex: 0,
				//选项卡
				tabBars: [
					{ name: '关注' },
					{ name: '话题' }
				],
				//关注列表
				list: [],
				//1.上拉加载更多 2.加载中... 3.没有更多了~
				loadmore: "上拉加载更多",
				//热门分类
				hotCate: [
					{ name: '关注' },
					{ name: '推荐' },
					{ name: '体育' },
					{ name: '热点' },
					{ name: '财经' },
					{ name: '娱乐' },
				],
				//最近更新数据
				topicList: [
					{ 
						cover: "/static/demo/topicpic/1.jpeg",
						title: "话题名称",
						desc: "话题描述",
						today_count: 0,
						news_count: 10
					},
					{
						cover: "/static/demo/topicpic/1.jpeg",
						title: "话题名称",
						desc: "话题描述",
						today_count: 0,
						news_count: 10
					},
					{
						cover: "/static/demo/topicpic/1.jpeg",
						title: "话题名称",
						desc: "话题描述",
						today_count: 0,
						news_count: 10
					},
					{
						cover: "/static/demo/topicpic/1.jpeg",
						title: "话题名称",
						desc: "话题描述",
						today_count: 0,
						news_count: 10
					},
					{
						cover: "/static/demo/topicpic/1.jpeg",
						title: "话题名称",
						desc: "话题描述",
						today_count: 0,
						news_count: 10
					},
					{
						cover: "/static/demo/topicpic/1.jpeg",
						title: "话题名称",
						desc: "话题描述",
						today_count: 0,
						news_count: 10
					},
					{
						cover: "/static/demo/topicpic/1.jpeg",
						title: "话题名称",
						desc: "话题描述",
						today_count: 0,
						news_count: 10
					},
					{
						cover: "/static/demo/topicpic/1.jpeg",
						title: "话题名称",
						desc: "话题描述",
						today_count: 0,
						news_count: 10
					}
				]
			}
		},
		onLoad() {
			//获取系统信息
			let res = uni.getSystemInfo({
				success: res => {
					//计算滚动区域高度 （可视区域 - 状态栏 - 自定义导航栏）
					this.scrollH = res.windowHeight - res.statusBarHeight - 44;
				}
			});
			this.list = demo;
		},
		methods: {
			//打开发布页
			openAddInput() {
				uni.navigateTo({
					url: '/pages/add-input/add-input'
				})
			},
			//切换选项卡
			changeTab(index) {
				this.tabIndex = index;
			},
			//滑动切换
			onchangeTab(e) {
				this.tabIndex = e.detail.current;
			},
			//顶/踩事件
			doSupport(data) {
				// 拿到当前对象
				let item = this.list[data.index];
				// 顶/踩消息提示
				let message = data.type === "support" ? "顶" : "踩";
				// 判断之前是否已经顶/踩
				if(item.support.type === "") {
					item.support[data.type+'_count']++;
				// 若之前进行过顶操作
				}else if(item.support.type === "support" && data.type === "unsupport") {
					// 顶-1
					item.support.support_count--;
					// 踩+1
					item.support.unsupport_count++;
				// 若之前进行过踩操作
				}else if(item.support.type === "unsupport" && data.type === "support") {
					// 顶+1
					item.support.support_count++;
					// 踩-1
					item.support.unsupport_count--;
				}
				item.support.type = data.type;
				uni.showToast({
					title: message + '成功'
				});
			},
			//上拉加载更多
			loadmoreEvent() {
				//判断是否处于可加载状态
				if(this.loadmore !== '上拉加载更多') {
					return;
				}
				//修改加载状态
				this.loadmore = '加载中...';
				setTimeout(() => {
					this.list = [...this.list,...this.list];
					this.loadmore = '上拉加载更多';
				}, 2000)
			}
		}
	}
</script>

<style>

</style>
